<template>
  <div class="content">
    <el-table highlight-current-row :data="dataList">
      <el-table-column prop="songName" label="歌曲"/>
      <el-table-column prop="singer" label="歌手"/>
      <el-table-column prop="lyrics" label="歌词"/>
      <el-table-column label="编辑" width="80" align="center">
        <template #default="scope">
          <el-dropdown>
            <el-icon ><MoreFilled/></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Download" @click="downloadMusic({
                  songUrl:scope.row.url,
                  songName:scope.row.name
                })">下载</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script lang="ts">
import {defineComponent, getCurrentInstance, toRefs, computed, reactive, ref} from "vue";
import {useStore} from "vuex"


import mixin from "@/mixins/mixin"
import {HttpManager} from "@/api"
import {Icon} from "@/enums"
import {ChatDotSquare, Download, MoreFilled} from "@element-plus/icons-vue";

export default defineComponent({
  computed: {
    ChatDotSquare() {
      return ChatDotSquare
    },
    Download() {
      return Download
    }
  },
  components: {MoreFilled},
  props:{
    songWordList:Array,
  },

  setup(props){
    const { getSongTitle, getSingerName, playMusic, checkStatus, downloadMusic } = mixin();
    const {songWordList} = toRefs(props)

    const dataList=computed(()=>{
      const list=[];
      songWordList.value.forEach((item:any,index)=>{
        item["songName"]=getSongTitle(item.name);
        item["singer"]=getSingerName(item.name);
        item["lyrics"]=item.lyric;
        list.push(item);
      })
      console.log(list)
      return list;
    })

    return{
      dataList,
      downloadMusic
    }
  }

})

</script>



<style lang="scss" scoped>
@import "@/assets/css/var.scss";
@import "@/assets/css/global.scss";

.content {
  background-color: $color-white;
  border-radius: $border-radius-songlist;
  padding: 10px;
}

.content:deep(.el-table__row.current-row) {
  color: $color-black;
  font-weight: bold;
}

.content:deep(.el-table__row) {
  cursor: pointer;
}

.icon {
  @include icon(1.2em, $color-black);
}
</style>